<template>
    <div class="homePage">
        <div class="personal ">
            <div class="ibox-title">
                <h5 class="titles">{{ $t('webAuto.BasicInformation') }}</h5>
                <div class="pull-right">
                    <el-button @click="updateClick" type="danger"
                        style="padding:0 7px;  background-color: #C03D3E; border-color: #C03D3E;height:27px;color: #FFFFFF;">
                        <el-icon style="padding-right:5px">
                            <GoodsFilled />
                        </el-icon>{{ $t('webAuto.ChangePassword') }}</el-button>
                </div>
            </div>
            <div class="ibox-content">
                <p style="margin: 0 0 10px">{{ $t('webAuto.OtherInformation') }}</p>
                <div class="form-group">
                    <p class="form-name">{{ $t('webAuto.LoginAccount') }}</p>
                    <p class="form-content">{{ form.JobNo }}</p>
                </div>
                <div class="form-group">
                    <p class="form-name">{{ $t('webAuto.fullName') }}</p>
                    <p class="form-content">{{ form.name }}</p>
                </div>
                <div class="form-group">
                    <p class="form-name">{{ $t('webAuto.department') }}</p>
                    <p class="form-content">{{ form.deptName }}</p>
                </div>
            </div>
        </div>
        <!-- 修改密碼的弹框 -->
        <div class="password" v-if="data.passwordBoxShow">
            <div class="passwordBox">
                <div class="clonse" @click.stop='data.passwordBoxShow=false'><el-icon>
                        <CircleClose />
                    </el-icon>
                </div>
                <img class="lock" src="./img/lock.png" />
                <h3 class="name">{{ $t('webAuto.ChangePassword') }}</h3>
                <div class="input-group">
                    <el-input style="margin-bottom: 15px;" type="password" v-model="data.oldPassword" id="oldPassword"
                        :placeholder="$t('webAuto.OldPassword')" />
                    <el-input style="margin-bottom: 15px;" type="password" v-model="data.newPassword" id="newPassword"
                        :placeholder="$t('webAuto.NewPassword')" />
                    <el-input style="margin-bottom: 15px;" type="password" v-model="data.newPasswordPass"
                        id="newPasswordPass" :placeholder="$t('webAuto.ConfirmPassword')" />
                    <div class="form-group ng-binding">
                        {{ $t('webAuto.passwordRule') }}
                    </div>
                    <el-button class="form-group" @click.stop="submit" type="danger"
                        :disabled="data.oldPassword == '' || data.newPassword == '' || data.newPasswordPassd == ''"
                        style="width:100%;  background-color: #DE696A; border-color: #DE696A;color: #FFFFFF;">
                        {{ $t('webAuto.sure') }}</el-button>
                    <p v-if="data.oldPassword == '' || data.newPassword == '' || data.newPasswordPassd == ''"
                        style="color:#ed5565"><small class="ng-binding">{{ data.oldPassword == '' ? $t('webAuto.fillOldPassword') :
                            data.newPassword == '' ? $t('webAuto.fillNewPassword') : data.newPasswordPass == '' ? $t('webAuto.confirmNewPassword') : ''
                            }}</small>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { onMounted, reactive } from 'vue';
import { updatePassword } from '@/api/sys'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const store = useStore();

const data = reactive({
    passwordBoxShow: false,
    oldPassword: '',
    newPassword: '',
    newPasswordPass: '',
})

const form = reactive({
    name: '',
    JobNo: '',
    deptName: '',
})

onMounted(() => {
    let arr = JSON.parse(localStorage.getItem('loginUser'))
    form.name = arr.name
    form.JobNo = arr.id
    form.deptName = arr.deptName
})
// 打开修改密码的弹框
const updateClick = () => {
    data.passwordBoxShow = true
    data.oldPassword = ''
    data.newPassword = ''
    data.newPasswordPass = ''
}
// 修改密码的提交
const submit = () => {
    if (data.newPassword != data.newPasswordPass) return ElMessage({ type: 'success', message: '新密码两次填写不一致' })
    updatePassword({
        oldPassword: data.oldPassword,
        newPassword: data.newPassword
    }).then(res => {
        ElMessage({ type: 'success', message: t('webAuto.changeSuccess') })
        data.passwordBoxShow = false
    }).catch((err) => {
        ElMessage({ message: t('webAuto.originalPasswordIncorrect') + err, type: 'warning' })
    })
}
</script>

<style scoped lang="less">
@import "index.less";

* {
    margin: 0;
    padding: 0;
}

// 自己的樣式
.personal {
    margin: 20px 0 0 0;
    font-size: 13px;
    color: #676a6c;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    height: 660px;
    background-color: #fff;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .personal {
        width: 60%;
    }
}



.ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    height: 55px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .titles {
        flex: 1;
        display: inline-block;
        font-size: 14px;
        margin: 0 0 7px;
        padding: 0;
        text-overflow: ellipsis;
    }

    .pull-right {
        width: 100px;
    }
}

.password {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgba(0, 0, 0, .5);

}

.ibox-content {
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;

    .form-group {
        margin-bottom: 15px;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        overflow: hidden;
        height: 35px;
        font-weight: 700;
        font-size: 13px;

        .form-name {
            width: 150px;
            padding: 15px 7px 0;
            text-align: right;
            box-sizing: border-box;

        }

        .form-content {
            flex: 1;
            padding: 15px 15px 0;
        }
    }
}

// 密码弹框
.passwordBox {
    width: 600px;
    height: 525px;
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    margin: 85px auto;
    text-align: center;
    color: #676a6c;

    .clonse {
        // height: 30px;
        padding: 5px 5px 0 0;
        text-align: right;
        box-sizing: border-box;
        font-size: 26px;
    }

    .lock {
        width: 260px;
        height: 170px;
        padding-top: 15px;
    }

    .name {
        font-size: 16px;
        color: #676a6c;
        margin: 5px 0 10px 0;
    }

    .input-group {
        width: 300px;
        margin: 0 auto;

        .form-group {
            margin-bottom: 15px;
        }
    }
}
</style>
